
<template>
	<view class="flex-col section_3" @click="navTo('/pages/order/detail', { id: info.id })">
		<view class="flex-row justify-between group_6">
			<text class="font_5">订单{{info.orderno}}</text>
			<text class="font_3">{{showStatusTxt(info.status)}}</text>
		</view>
		<view class="flex-row justify-between items-center group_7">
			<view class="flex-row space-x-22">
				<image
					class="image_5"
					mode="aspectFill"
					:src="info.car_image"
				/>
				<view class="flex-col items-start group_8 space-y-17">
					<text class="font_6">{{info.car_shortname}}</text>
					<text class="car_no">{{info.car_chepai}}</text>
					<text class="font_7 text_5">{{info.car_infoname}}</text>
				</view>
			</view>
			<!-- 
			<view class="flex-row items-center section_4 space-x-9">
				<text class="font_1">车辆详情</text>
				<image
					class="shrink-0 image_6"
					src="/static/msg-r.png"
				/>
			</view>
			-->
		</view>
		<view class="flex-row items-center group_9 space-x-10">
			<!-- <image
				class="shrink-0 image_7"
				src="/static/car-detail-dot.png"
			/> -->
			<view class="flex-col flex-auto space-y-20">
				<view class=" line-wrap">
					<text class="dot get"></text>
					<text class="font_1 city">{{info.get_city_name}}</text>
					<text class="font_1 text_6">{{info.get_address}}</text>
					<text class="font_1 text_6">{{showDate(info.starttime)}}</text>
				</view>
				<view class="space-x-14 line-wrap">
					<text class="dot back"></text>
					<text class="font_1 city">{{info.back_city_name}}</text>
					<text class="font_1 text_6">{{info.back_address}}</text>
					<text class="font_1 text_6">{{showDate(info.endtime)}}</text>
				</view>
			</view>
		</view>
		<view class="flex-row justify-end group_10 space-x-23-reverse">
			<!-- 待付款-->
			<block v-if="info.status === 0">
				<view class="flex-col justify-start items-center text-wrapper_3" @click.stop="navTo('/pages/order/cancel', { orderid: info.id })">
					<text class="font_7">取消订单</text>
				</view>
			</block>
			<!--已付款 待取车-->
			<block v-if="info.status === 10">
				<view class="flex-col justify-start items-center text-wrapper_3" @click.stop="navTo('/pages/order/cancel', { orderid: info.id })">
					<text class="font_7">取消订单</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_4" @click.stop="navTo('/pages/order/msgGetcar', { orderid: info.id,car_chepai: info.car_chepai})">
					<text class="font_8 text_10">确认取车</text>
				</view>
			</block>
			<!--已取车 待还车-->
			<block v-else-if="info.status === 20">
				<view class="flex-col justify-start items-center text-wrapper_4" @click.stop="navTo('/pages/order/msgReturncar', { orderid: info.id})">
					<text class="font_8 text_10">资料上传</text>
				</view>
				<!-- <view class="flex-col justify-start items-center text-wrapper_4"><text class="font_8 text_10">门店指引</text></view> -->
			</block>
			<!-- 已逾期 时间不能要-->
			<block v-else-if="info.status === 200">
				<view class="flex-col justify-start items-center text-wrapper_3" @click.stop="navTo('/pages/order/msgReturncar', { orderid: info.id })">
					<text class="font_7">资料上传</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_4" @click.stop="call(info.user_mobile)">
					<text class="font_8 text_10">联系客户</text>
				</view>
			</block>
			<!-- 完成 -->
			<block v-else-if="info.status === 30 && info.comment_info && info.comment_info.id">
				<view class="flex-col justify-start items-center text-wrapper_4">
					<text class="font_8 text_10">查看评价</text>
				</view>
			</block>
			<!-- 已取消 -2已付款取消-->
			<block v-else-if='(info.status === -1 || info.status === -2) && info.cancel_info &&  info.cancel_info.reason'>
				<view class="cancel-txt">
					取消原因：{{info.cancel_info.reason}}
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
import { onReachBottom,onLoad } from "@dcloudio/uni-app";
import {showDate, showStatusTxt} from '../../js/common.js';
const orderItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	methods:{
		showDate,
		showStatusTxt,
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {}
		});
		watchEffect(() => {
			data.info = props.info;
		});
		onLoad(()=>{
			// console.log('onLoad showStatusTxt',showStatusTxt);
		})
		const call= (phone)=>{
			uni.makePhoneCall({
				phoneNumber: phone+'',
			})
		}
		return {
			...toRefs(data),
			call,
			// showDate,
			// showStatusTxt
		};
	}
});
export default orderItem;
</script>


<style lang="scss" scoped>

.section_3 {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	.group_6 {
		padding: 30rpx 20rpx 30rpx 25rpx;
		border-bottom: solid 2rpx #0000000f;
		.font_5 {
			font-size: 26rpx;
			font-family: PingFang;
			color: #333333;
		}
		.font_3 {
			font-size: 26rpx;
			font-family: PingFang;
			color: #256ae5;
		}
	}
	.group_7 {
		padding: 30rpx 24rpx 24rpx 35rpx;
		border-bottom: solid 2rpx #0000000f;
		.space-x-22 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 22rpx;
			}
			.image_5 {
				margin-top: 5rpx;
				width: 156rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}
			.group_8 {
				margin-bottom: 4rpx;
				.font_6 {
					font-size: 32rpx;
					font-family: PingFang;
					font-weight: 700;
					color: #333333;
				}
				.font_7 {
					font-size: 24rpx;
					font-family: PingFang;
					color: #999999;
				}
                .car_no{
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.space-y-17 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-top: 17rpx;
				}
			}
		}
		.section_4 {
			padding: 13rpx 16rpx;
			background-color: #f5f6f8;
			border-radius: 4rpx;
			height: 49rpx;
			.image_6 {
				width: 8rpx;
				height: 15rpx;
			}
		}
		.space-x-9 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 9rpx;
			}
		}
	}
	.group_9 {
		padding: 21rpx 30rpx 32rpx;
		border-bottom: solid 2rpx #0000000f;
		.line-wrap{
			flex-wrap: wrap;
		}
		.image_7 {
			width: 12rpx;
			height: 55rpx;
			flex-shrink: 0;
		}
		.dot{
			width: 12rpx;
			height: 12rpx;
			border-radius: 12rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
			display: inline-block;
			margin-top: 4rpx;
			&.get{
				background-color: #3E6FEF;
			}
			&.back{
				background-color: #38B910;
			}
		}
		.space-y-20 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-top: 20rpx;
			}
			.text_6 {
				margin-left: 13rpx;
				// max-width: 360rpx;
				line-height: 30rpx;
			}
			.space-x-14 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-left: 14rpx;
				}
			}
		}
	}
	.space-x-10 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 10rpx;
		}
	}
	.font_1 {
		font-size: 24rpx;
		font-family: PingFang;
		color: #333333;
		word-break: break-all;
	}
    .group_10 {
		padding: 23rpx 24rpx;
		position: relative;
		.text-wrapper_3 {
			padding: 18rpx 0;
			border-radius: 32rpx;
			width: 178rpx;
			height: 66rpx;
			border: solid 1rpx #999999;
			.font_7 {
				font-size: 28rpx;
				font-family: PingFang;
				color: #333333;
			}
		}
		.text-wrapper_4 {
			padding: 18rpx 0;
			background-color: #3e6fef;
			border-radius: 32rpx;
			width: 176rpx;
			height: 64rpx;
			.font_8 {
				font-size: 28rpx;
				font-family: PingFang;
				color: #ffffff;
			}
		}
	    .cancel-txt{
			width: 100%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #256AE5;
			line-height: 38rpx;
		}
	}
	.space-x-23-reverse {
		& > view:not(:last-child),
		& > text:not(:last-child),
		& > image:not(:last-child) {
			margin-right: 23rpx;
		}
	}
}
</style>
